﻿
<template>
    <section>




        <!--工具条-->
        <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
            <el-form :inline='true' :model='filters' @submit.native.prevent>
                <!--<el-form-item>
                    <el-input v-model='filters.name' placeholder='名称/Key'></el-input>
                </el-form-item>-->


                <el-form-item>
                    <el-date-picker type="date" placeholder="选择开始日期" v-model="filters.begin" style="width:180px" format="yyyy年MM月dd日"
                                    value-format="yyyy-MM-dd">></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker type="date" placeholder="选择结束日期" v-model="filters.end" style="width:180px" format="yyyy年MM月dd日"
                                    value-format="yyyy-MM-dd">></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type='primary' @click='getDtoPage'>查询</el-button>
                </el-form-item>
                <!--<el-form-item>
                    <el-button type='primary' @click='handleAdd'>新增</el-button>
                </el-form-item>
                <el-button type='danger' @click='batchRemove' :disabled='this.sels.length===0'>批量删除</el-button>-->
            </el-form>
        </el-col>



        <!--列表-->
        <el-table :data='users' highlight-current-row v-loading='listLoading' @selection-change='selsChange'
                  style='width: 100%;'
                  sortable='custom' @sort-change='sortKey'>

            <!--<el-table-column prop='CR_BeginTime' label='开始时间' width='100' :formatter="dateFormat">  </el-table-column>
            <el-table-column prop='CR_EndTime' label='结束时间' width='100' :formatter="dateFormat">  </el-table-column>-->




            <el-table-column prop='TongDaoName' label='通道名称' width='' :formatter="wlTypeFormat">  </el-table-column>
            <el-table-column prop='TongDaoCode' label='通道代码' width=''>  </el-table-column>
            <el-table-column prop='TongDaoCount' label='装货次数' width=''>  </el-table-column>
            <el-table-column prop='SumWeight' label='装货重量' width=''>  </el-table-column>



        </el-table>



        <!-- 工具条 ,分页 -->
        <el-col :span='24' class='toolbar'>

            <!--<el-pagination layout='prev, pager, next' @current-change='handleCurrentChange' :page-size='50'
                           :total='total' style='float:right;'>
            </el-pagination>-->

            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageIndex"
                           :page-sizes="[ 20, 50, 100]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           style='float:right;'>
            </el-pagination>


        </el-col>






    </section>
</template>

<script>

    //import * as fecha from ""
    //import util from '../../../util/date'
    import * as fecha from "element-ui/lib/utils/date";
    import { testapi, DTSNReport_ReportTongDao } from "../../../api/api";

    export default {
        data() {   // 全局变量
            return {
                filters: { name: '' },
                users: [],
                total: 0,
                page: 1,

                pageIndex: 1,
                pageSize: 20,
 
                listLoading: false,
                sels: [],//列表选中列
                addDialogFormVisible: false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    CR_ID: [{ required: true, message: '请输入', trigger: 'blur' }],
                    CR_Type: [{ required: true, message: '请输入装载类型', trigger: 'blur' }],
                    CR_Car: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
                    CR_CardCode: [{ required: true, message: '请输入车辆卡号', trigger: 'blur' }],
                    CR_truckweight: [{ required: true, message: '请输入车辆标载', trigger: 'blur' }],
                    CR_TongDaoCode: [{ required: true, message: '请输入通道编号', trigger: 'blur' }],
                    CR_Varieties: [{ required: true, message: '请输入品种', trigger: 'blur' }],
                    CR_Order: [{ required: true, message: '请输入订单', trigger: 'blur' }],
                    CR_weightserialcode: [{ required: true, message: '请输入重量序列号', trigger: 'blur' }],
                    CR_accountcode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
                    CR_accountname: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
                    CR_Date: [{ required: true, message: '请输入装载日期', trigger: 'blur' }],
                    CR_BeginTime: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
                    CR_EndTime: [{ required: true, message: '请输入结束时间', trigger: 'blur' }],
                    CR_Orderpreweight: [{ required: true, message: '请输入请发量', trigger: 'blur' }],
                    CR_LoadingCapacity: [{ required: true, message: '请输入装载量', trigger: 'blur' }],
                }
                ,

                addLoading: false,


            }
        },
        methods: {    // 全局方法
            //性别显示转换
            //formatSex: function (row, column) {
            //    return row.C_Value == 2 ? '男' : row.C_Value;
            //},
            //formatterCreateTime: function (row, column) {
            //    return (!row.C_CreateTime || row.C_CreateTime == '') ? '' : util.formatDate.format(new Date(row.C_CreateTime), 'yyyy-MM-dd');
            //},


            dateFormat(row, column, cellValue) {
                return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd HH:mm:ss') : '';
            },

            wlTypeFormat(row, column, cellValue) {
                console.log(cellValue);
                if (cellValue == 1) {
                    //熟料', value: 1 }, { text: '散料', value: 2
                    return '熟料';
                }
                else {
                    return '散料';
                }
                //console.log(row);
                //console.log(cellValue);
                //return '';
            },

            handleCurrentChange(val) {
                this.page = val;
                this.getDtoPage();
            },
            // 每页数
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDtoPage();
            },

            // 测试
            sortKey(val) {
                console.log(val)
            },


            //获取用户列表
            getDtoPage() {


                let para = {
                    page: this.pageIndex,
                    pageSize: this.pageSize,

                    begin: this.filters.begin,
                    end: this.filters.end,
                    sidx: this.sidx,
                    order: this.order
                };


                this.listLoading = true;

                testapi();

                DTSNReport_ReportTongDao(para).then((res) => {
                    console.log('res',res.data);
                    //this.total = res.data.response.length;
                    this.users = res.data.response;
                    this.listLoading = false;
                });
            },

            selsChange: function (sels) {
                this.sels = sels;
            },
        },
        mounted() {
            this.getDtoPage();
        }
    }

</script>

<style scoped>
</style>
